Cocoon-AI/architecture-diagram-generator：生成美观的深色系系统架构图，可输出为独立 HTML/SVG 文件。作为 Claude AI skill 运行。

中文 | English

Architecture Diagram Generator

需要一张架构图？让 AI 帮你生成。

在 Claude.ai 中配合这个专用 skill 使用，就能在几秒钟内生成专业的架构图。你只需描述你的系统，Claude 就会生成一个漂亮的深色主题图，并输出为可在任意浏览器中打开的独立 HTML 文件。

不需要设计技能：只要用自然语言描述你的架构
快速迭代：让 Claude 添加组件、调整布局，或更新样式
便于分享：输出是单个 HTML 文件，不需要任何特殊软件

🚀 快速开始（3 步）

第 1 步：安装 skill

⚠️ 需要 Claude Pro、Max、Team 或 Enterprise 方案

下载 architecture-diagram.zip
打开 claude.ai → Settings → Capabilities → Skills
点击 + Add 并上传 zip 文件
打开这个 skill 的开关

📚 需要帮助？请看下文的完整安装指南。

第 2 步：准备一段描述你架构的文字

你只需要一段系统文字描述。任选一种方式即可：

方式 A：让 AI 分析你的代码库

在 Cursor、Claude Code、Windsurf 或 ChatGPT 中打开你的代码，并这样提问：

text

Analyze this codebase and describe the architecture. Include all major
components, how they connect, what technologies they use, and any cloud
services or integrations. Format as a list for an architecture diagram.

方式 B：自己编写

只需要列出你的组件，以及它们之间如何连接：

text

- React frontend talking to a Node.js API
- PostgreSQL database
- Redis for caching
- Hosted on AWS with CloudFront CDN

方式 C：先让 Claude 给你一个典型架构

如果你没有特定系统，也可以先让 Claude 给你一个起点：

text

What's a typical architecture for a SaaS application?

第 3 步：让 Claude 调用这个 skill 生成架构图

把第 2 步得到的内容粘贴到 Claude 中，并确保你已经安装了 Architecture Diagram Generator skill：

text

Use your architecture diagram skill to create an architecture diagram from this description:

[PASTE YOUR ARCHITECTURE DESCRIPTION HERE]

就这么简单。Claude 会生成一个漂亮的 HTML 文件，你可以在任意浏览器中打开。

之后你还可以继续通过聊天来迭代。比如直接告诉 Claude：“Please update XYZ”，就能实时更新图。你也可以让 Claude 修正图中的问题。

常见场景的示例提示词

用于 Web 应用：

text

Create an architecture diagram for a web application with:
- React frontend
- Node.js/Express API
- PostgreSQL database
- Redis cache
- JWT authentication

用于 AWS 无服务器架构：

text

Create an architecture diagram showing:
- CloudFront CDN
- API Gateway
- Lambda functions (Node.js)
- DynamoDB
- S3 for static assets
- Cognito for auth

用于微服务：

text

Create an architecture diagram for a microservices system with:
- React web app and mobile clients
- Kong API Gateway
- User Service (Go), Order Service (Java), Product Service (Python)
- PostgreSQL, MongoDB, and Elasticsearch databases
- Kafka for event streaming
- Kubernetes orchestration

📸 示例

Web 应用（React + Node.js + PostgreSQL）

AWS 无服务器（Lambda + API Gateway + DynamoDB）

微服务（Kubernetes + API Gateway）

✨ 特性

漂亮的深色主题：Slate-950 背景，配合细微网格纹理
语义化配色：前端、后端、数据库、云服务、安全组件都有一致的颜色体系
自包含输出：单个 HTML 文件，内嵌 CSS 和行内 SVG
零依赖：可在任何现代浏览器中打开，不需要 JavaScript
专业排版：使用 JetBrains Mono，带来技术感外观
智能图层顺序：箭头会干净地渲染在组件框之后

🎨 配色方案

组件类型	颜色	用途
Frontend	青色	客户端应用、UI、边缘设备
Backend	祖母绿色	服务器、API、服务
Database	紫罗兰色	数据库、存储、AI/ML
Cloud/AWS	琥珀色	云服务、基础设施
Security	玫瑰色	鉴权、安全组、加密
External	石板灰	通用外部系统

📦 安装

⚠️ 要求： Claude Pro、Max、Team 或 Enterprise

📚 第一次使用 Claude Skills？ 可查看官方指南：Using Skills in Claude

Claude.ai（推荐）

下载 architecture-diagram.zip
进入 Settings → Capabilities → 向下滚动到 Skills
点击 + Add 并上传 zip 文件
打开该 skill

Claude.ai Projects（替代方式）

在你的 Claude.ai Project 中，把 architecture-diagram.zip 上传到 Project Knowledge

Claude Code CLI

解压到你的 skills 目录：

bash

# 全局 skills
unzip architecture-diagram.zip -d ~/.claude/skills/

# 或项目本地
unzip architecture-diagram.zip -d ./.claude/skills/

手动安装

只要确保 Claude 能访问下面两个文件即可：

text

architecture-diagram/
├── SKILL.md              # skill 说明
└── assets/
    └── template.html     # 基础模板

💾 输出

Claude 生成的是一个自包含 HTML 文件，你可以：

直接在任意浏览器中打开
分享给队友（直接发送文件即可）
放入文档中
打印或导出为 PDF
托管到任意静态站点

📐 输出中包含的内容

每一张生成的图都包含：

页头：项目标题与动画状态指示器
主图：包含所有组件和连接关系的 SVG
摘要卡片：3 张信息卡片，用来突出关键细节
页脚：项目元数据

🛠 自定义

这个 skill 使用一致的设计系统，但 Claude 会根据你的需求调整：

布局：根据系统流程摆放组件
连接：用箭头表示数据流和关系
标签：协议、端口、注释
分组：安全组、云区域、限界上下文

📄 示例输出

生成的 HTML 结构如下：

html

<!DOCTYPE html>
<html>
  <head>
    <!-- Embedded styles, Google Fonts -->
  </head>
  <body>
    <div class="container">
      <div class="header"><!-- Title --></div>
      <div class="diagram-container">
        <svg><!-- Architecture diagram --></svg>
      </div>
      <div class="cards"><!-- Summary cards --></div>
      <p class="footer"><!-- Metadata --></p>
    </div>
  </body>
</html>

🔧 技术细节

SVG viewBox： 通常宽度为 1000 到 1100px，可响应式缩放
字体： JetBrains Mono（通过 Google Fonts 加载）
背景： #020617，带 40px 网格纹理
Z 轴顺序： 箭头先绘制，再通过不透明背景遮住透明组件填充下方的部分

📝 许可证

MIT License，可自由使用、修改和分发。

👥 贡献

欢迎提出建议和改进。你可以：

提交 issue 报告 bug 或提出功能请求
提交 PR 增强此项目
分享你生成的架构图

📬 联系方式

Cocoon AI 📧 hello@cocoon-ai.com

由 Cocoon AI 用 ❤️ 制作

everything-claude-code

awesome-design-md

design-md

skills

llm-wiki

claude-code

everything-claude-code

claude-mythos-preview

codex

skills

Architecture Diagram Generator ​

🚀 快速开始（3 步） ​

第 1 步：安装 skill ​

第 2 步：准备一段描述你架构的文字 ​

第 3 步：让 Claude 调用这个 skill 生成架构图 ​

常见场景的示例提示词 ​

📸 示例 ​

Web 应用（React + Node.js + PostgreSQL） ​

AWS 无服务器（Lambda + API Gateway + DynamoDB） ​

微服务（Kubernetes + API Gateway） ​

✨ 特性 ​

🎨 配色方案 ​

📦 安装 ​

Claude.ai（推荐） ​

Claude.ai Projects（替代方式） ​

Claude Code CLI ​

手动安装 ​

💾 输出 ​

📐 输出中包含的内容 ​

🛠 自定义 ​

📄 示例输出 ​

🔧 技术细节 ​

📝 许可证 ​

👥 贡献 ​

📬 联系方式 ​

Architecture Diagram Generator

🚀 快速开始（3 步）

第 1 步：安装 skill

第 2 步：准备一段描述你架构的文字

第 3 步：让 Claude 调用这个 skill 生成架构图

常见场景的示例提示词

📸 示例

Web 应用（React + Node.js + PostgreSQL）

AWS 无服务器（Lambda + API Gateway + DynamoDB）

微服务（Kubernetes + API Gateway）

✨ 特性

🎨 配色方案

📦 安装

Claude.ai（推荐）

Claude.ai Projects（替代方式）

Claude Code CLI

手动安装

💾 输出

📐 输出中包含的内容

🛠 自定义

📄 示例输出

🔧 技术细节

📝 许可证

👥 贡献

📬 联系方式